<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>私人订制详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/strategyCatalogs.css"/>
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<link rel="stylesheet" href="/css/newsContent.css">
		<script src="/js/plugins/jrender/jrender.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
		<script src="/js/plugins/dialog/dialog.min.js"></script>
		<script src="/js/common.js"></script>
		<script>
            $(function () {
                var currentPage = 1;
                var pages;
                //拿到文章的id
                var id = getParams().id;
                console.log(id);
                var user = JSON.parse(sessionStorage.getItem("user"));
                //发送ajax请求查询文章信息
                $.get("/personals/"+id, function (data) {
                    $(".newsCommends").renderValues(data);
                });
            });


                //显示相关推荐
                $.get("/personals", {state: 1}, function (data) {
                    $("#carouselExampleControls").renderValues(data, {
                        handle: function (ele, value) {
                            ele.href = "/shore/personalContent.html?id="+value;
                        }
                    });
                    $("#newsCommends > div:first").addClass("active");
                }, "json");


                //--------------------------------------------------------
                //评论功能
                //获取评论
                $.get("/reviews",{state:3,essayId:id},function (data) {
                    if (data) {
                        $("#comment-list").empty();
                        $(data).appendTo("#comment-list");
                        pages = $("#comment-list>div:first").data("pages");
                        //获取总条数
                        var total = $("#comment-list>div:first").data("total");
                        $("#total").html(total);
                    }
                });

                //分页
                //当屏幕滚到最底部时执行函数
                $(window).scroll(function () {
                    //判断是否到底部
                    if (isEnd()) {
                        //判断是否有下一页
                        if (currentPage < pages) {
                            //设置当前页+1,并且发送ajax请求获取下一页数据
                            currentPage++;
                            $.get("/reviews", {currentPage: currentPage, state:3, essayId:id}, function (data) {
                                $(data).appendTo("#comment-list");
                            });
                        } else {
                            $(document).dialog({
                                type : "notice",
                                infoText: "已经到底部了",
                                autoClose: 1500,
                                position: "center"
                            });
                        }
                    }
                });

                $("#commentBtn").click(function () {
                    if (user) {
                        $("#inputModal").modal('show');
                    }else{
                        $(document).dialog({
                            type: "confirm",
                            style: "IOS",
                            titleShow: false,
                            content: "请登录",
                            buttons: [{
                                name: "跳转到登录界面",
                                callback: function() {
                                    location.href = "/login.html";
                                }
                            }]
                        });
                        return;
                    }

                });

                //提交评论
                //评论事件ajax处理
                $('.reviewBtn').click(function(){
                    //取得title和content的值
                    var content=$('#content').val();
                    if(content==''){
                        alert("评论或标题为空！无法提交！");
                        return false;
                    }
                    var userId= user.id//用户id
                    var authorId = 0;//作者id
                    var state = 3;//日报
                    var essayId = id;//点评的id
                    var review = $("#content").val();
                    var json = {"user.id":userId ,"state":state, "essayId":essayId , "authorId": authorId,"review":review};
                    $.post("/reviews",json,function(data){
                        /*$(data).prependTo("#comment-list");
                        $(".closeBtn").click();*/
                        window.location.reload();
                    })
                });
                //-------------------------------------------------------------------------------
		</script>
	</head>

<body>
	<div class="newsDetail">
		<div class="newsCommends">
			<a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
				<span>
					<i class="fa fa-chevron-left fa-2x" style="color: white;"></i>
				</span>
			</a>
			<img render-src="coverUrl">
			<div class="container">
				<div class="row typeRow">
					<div class="col-4">
						<span class="type" render-html="typeName"></span>
					</div>
					<div class="col-2">
					</div>
					<div class="col-2">
						<span>By</span>
					</div>
					<div class="col-4">
						<span class="type">陈晓洪</span>
					</div>
				</div>

				<div class="detail">
					<h2 class="title" render-html="title"></h2>
					<div class="content" render-html="newContent.content">
				</div>
			</div>
		 </div>
		</div>
		<div class="container">
			<h2>相关推荐</h2>
			<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
				<div id="personalCommends" class="carousel-inner" render-loop="list">
					<div class="carousel-item">
						<div class="border commend">
							<a href="personalContent.html" render-key="list.id" render-fun="handle">
								<img render-src="list.coverUrl" width="10%" height="10px">
								<h6 render-html="list.title"></h6>
								<h6 render-html="list.releaseTime"></h6>
							</a>
						</div>
					</div>
				</div>

				<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only"></span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only"></span>
				</a>
			</div>
		</div>
		<!-- 评价部分开始 -->
		<div class="tt_comment">
			<div class="tt_comTitle">
				评论 (<span id="total">0</span>)
			</div>
			<div class="tt_comList" style="margin-top: 0">
				<ul>
					<li>
						<p style="padding-bottom:20px;text-align: center;font-size: 16px;line-height: 22px" id="comment-list">暂无评论</p>
					</li>
				</ul>
			</div>
		</div>
		<br/>
		<br/>
		<!-- 评价部分结束 -->
		<div class="operation">
			<div class="d-flex justify-content-between">
				<div class="p-2" id="commentBtn"><i class="fa fa-commenting-o" ></i> 添加你的评论</div>
				<div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
			</div>
		</div>
	</div>
	<!--评论的表单-->
	<div id="inputModal" class="modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
				</div>
				<div class="modal-body">
					<!-- 发表评论 -->
					<div id="comment">
						<h3>发表评论:</h3>
						<p>
							<span>内容：</span>
							<textarea rows="10" id="content" cols="30" class="text-textarea"></textarea></p>
						<p style="text-align:right;">
						<div class="modal-footer">
							<button type="button" class="btn closeBtn" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary reviewBtn">保存</button>
						</div>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- ---------------------------评论----------------------- -->
</body>

</html>
